<template>
	<view :style="{color:color}">
		<text :style="{fontSize:unitSize,fontWeight:unitWeight}">{{unit}}</text>
		<text :style="{fontSize:bigSize,fontWeight:bigWeight}">{{IntPrice}}</text>
		<text>.</text>
		<text :style="{fontSize:smallSize,fontWeight:smallWeight}">{{decimalsPrice}}</text>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'
	let prop = defineProps({
		price:{
			type:[String,Number],
			default:'0.00'
		},
		bigSize:{
			type:String,
			default:'40rpx'
		},
		bigWeight:{
			type:String,
			default:'600'
		},
		smallSize:{
			type:String,
			default:'24rpx'
		},
		smallWeight:{
			type:String,
			default:'600'
		},
		color:{
			type:String,
			default:'#FD4C56'
		},
		unitSize:{
			type:String,
			default:'24rpx'
		},
		unitWeight:{
			type:String,
			default:'600'
		},
		unit:{
			type:String,
			default:'￥'
		}
	})
	let IntPrice = computed(()=>{
		let a = prop.price.toString()
		let INT = a.split('.')[0]
		return INT
	})
	let decimalsPrice = computed(()=>{
		let a = prop.price.toString()
		let decimals = a.split('.')[1] ? a.split('.')[1] : '00'
		return decimals
	})
</script>

<style lang="scss">

</style>